<template>
    <div class="TopClassify">
        <div class="Left-box">
            <div class="fixed">
                <div class="back">
                    <van-icon name="arrow-left" @click="back" />
                </div>
                <div class="sidebar">
                    <van-sidebar v-model="TopActive">
                        <van-sidebar-item :title="item.name" @click="clickSidebar(item)" v-for="(item, index) in boyData" v-if="sortTopActive === 0" />
                        <van-sidebar-item :title="item.name" @click="clickSidebar(item)" v-for="(item, index) in girlsData" v-if="sortTopActive === 1" />
                        <van-sidebar-item :title="item.name" @click="clickSidebar(item)" v-for="(item, index) in publishData" v-if="sortTopActive === 2" />
                        <van-sidebar-item :title="item.name" @click="clickSidebar(item)" v-for="(item, index) in voiceData" v-if="sortTopActive === 3" />
                    </van-sidebar>
                </div>
            </div>
        </div>
        <div class="Rig-box">
            <div class="fixed">
                <div class="Nav">
                    <van-tabs v-model="tabsActive" line-width="15px" @click="clickTab($event)">
                        <van-tab v-for="item in AllData" :title="item.name"> </van-tab>
                    </van-tabs>
                </div>
            </div>
            <div class="Content">
                <div class="item" v-for="(item, index) in rankListData" @click="goBookDetails(item.id, item.title)">
                    <div class="leftImg">
                        <img class="img-auto" :src="item.cover" :alt="item.title" />
                    </div>
                    <div class="right-box">
                        <!-- 书名和排名 -->
                        <div class="name-top">
                            <div class="name">{{ item.title }}</div>
                            <div class="top" :class="{ one: index == 0, two: index == 1, three: index == 2 }" v-if="index < 3">TOP{{ index + 1 }}</div>
                            <div class="low" v-else>{{ index + 1 }}</div>
                        </div>
                        <!-- 描述 -->
                        <div class="desc" v-if="item.recomContent">{{ item.recomContent }}</div>
                        <div class="desc" v-else>{{ item.content }}</div>
                        <!-- 作者/类型/人气 -->
                        <div class="author-type-clickCount">
                            <div class="author">{{ item.author }}</div>
                            <div class="line">|</div>
                            <div class="type">{{ item.category }}</div>
                            <div class="clickCount" v-if="item.clickCount !== -1">{{ item.clickCount }}<span v-if="item.clickCount < 1000">万</span>人气</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "TopClassify",
    data() {
        return {
            tabsActive: 0,
            TabActive: 2,
            // 侧边点击高亮下标
            TopActive: 0,
            AllData: null,
            // 侧边导航数据
            TopData: [],
            // 点击分类标题显示侧边下标
            sortTopActive: 0,
            // 男生侧边
            boyData: null,
            // 女生侧边
            girlsData: null,
            // 出版侧边
            publishData: null,
            // 听书侧边
            voiceData: null,
            // 侧边榜单数据
            rankListData: null,
            // 男生人气榜
            boysClickCount: null,
            // 女生人气榜
            girlsClickCount: null,
            // 出版人气榜
            publishClickCount: null,
            // 听书人气榜
            videoClickCount: null,
        };
    },
    created() {
        this.getTopData();
        setTimeout(() => {
            this.clickSidebar(this.boysClickCount);
        }, 100);
    },
    methods: {
        clickTab($event) {
            // 修改侧边高亮下标
            this.sortTopActive = $event;
            this.TopActive = 0;
            if ($event == 0) {
                this.clickSidebar(this.boysClickCount);
            } else if ($event == 1) {
                this.clickSidebar(this.girlsClickCount);
            } else if ($event == 2) {
                this.clickSidebar(this.publishClickCount);
            } else {
                this.clickSidebar(this.videoClickCount);
            }
        },
        clickSidebar(item) {
            let parameter = null;
            //
            // 获取请求所需参数
            if (item !== null) {
                parameter = item.naviInfos[0].url.split("?")[1];
            }
            //
            this.axios({
                methods: "get",
                url: "store/rankList.json?" + parameter,
            })
                .then((res) => {
                    //
                    // 侧边榜单数据
                    if (res.data.list) {
                        this.rankListData = res.data.list;
                        // 处理人气值
                        for (let i = 0; i < this.rankListData.length; i++) {
                            if (this.rankListData[i].clickCount > 10000) {
                                this.rankListData[i].clickCount = Math.ceil(this.rankListData[i].clickCount / 1000) / 10;
                            }
                        }
                    }
                })
                .catch((err) => {});
        },
        // 请求数据
        getTopData() {
            this.axios({
                method: "get",
                url: "store/merged/rankNavi.json",
            })
                .then((res) => {
                    if (res.data.code === 0) {
                        this.AllData = res.data.data.list;

                        this.AllData.forEach((item) => {
                            this.TopData.push(item.subNavis);
                        });

                        // this.TopData = this.AllData.subNavis;
                        this.boyData = this.TopData[0];
                        // 拿出男生人气榜
                        this.boysClickCount = this.TopData[0][0];
                        this.girlsData = this.TopData[1];
                        // 拿出女生人气榜
                        this.girlsClickCount = this.TopData[1][0];

                        this.publishData = this.TopData[2];
                        // 拿出出版人气榜
                        this.publishClickCount = this.TopData[2][0];
                        this.voiceData = this.TopData[3];
                        // 拿出听书人气榜
                        this.videoClickCount = this.TopData[3][0];
                    }
                })
                .catch((err) => {});
        },
        // 跳转书籍详情

        goBookDetails(BookId, title) {
            if (BookId.split("_")[0] == "audio") {
                this.$router.push({
                    name: "ListenBook",
                    query: {
                        BookId,
                        title,
                    },
                });
            } else {
                this.$router.push({
                    name: "BookDetails",
                    query: {
                        BookId,
                        title,
                    },
                });
            }
        },
        back() {
            this.$router.back();
        },
    },
};
</script>

<style lang="less" scoped>
.TopClassify {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow-y: auto;
    display: flex;
    &::-webkit-scrollbar {
        display: none;
    }
    .Left-box {
        width: 20%;
        height: 100%;
        .back {
            width: 100%;
            height: 50px;
            line-height: 50px;
            .van-icon-arrow-left {
                font-size: 22px;
                margin-left: 10px;
            }
        }
        .sidebar {
            .van-sidebar-item--select::before {
                height: 15px;
                width: 2px;
                position: absolute;
                left: 75px;
                top: 29px;
            }
        }
    }
    .Rig-box {
        width: 80%;
        height: 100%;
        .Content {
            height: calc(100% - 50px);
            padding: 10px;
            margin-top: 50px;
            position: fixed;
            bottom: 0;
            top: 0;
            width: 290px;
            overflow-y: scroll;
            .item {
                // background-color: red;
                display: flex;
                align-items: center;
                margin-bottom: 20px;
                .right-box {
                    width: calc(100% - 70px);
                    height: 100%;
                    // background-color: pink;
                    padding-left: 10px;
                    position: relative;
                    .name-top {
                        height: 38px;
                        display: flex;
                        align-items: center;
                        .name {
                            width: 74%;
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                            -webkit-line-clamp: 1;
                            overflow: hidden;
                            font-size: 18px;
                            font-weight: 700;
                            font-family: fangsong;
                            color: #000;
                            line-height: 30px;
                        }
                        .top {
                            position: absolute;
                            top: 10px;
                            right: 10px;
                            font-size: 12px;
                            padding: 3px 1px 0px 1px;
                            color: #fff;
                        }
                        .low {
                            font-size: 18px;
                            position: absolute;
                            top: 10px;
                            right: 14px;
                            color: gray;
                        }
                        .one {
                            background-color: red;
                        }
                        .two {
                            background-color: #fc6803;
                        }
                        .three {
                            background-color: #fab60a;
                        }
                    }
                    .desc {
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 1;
                        overflow: hidden;
                        margin: 10px 0 14px 0;
                        font-size: 14px;
                        color: gray;
                    }
                    .author-type-clickCount {
                        display: flex;
                        align-items: center;
                        font-size: 14px;
                        color: gray;
                        .line {
                            margin: 0 5px;
                        }
                        .clickCount {
                            font-size: 12px;
                            color: red;
                            position: absolute;
                            bottom: 0;
                            right: 10px;
                        }
                    }
                }
                .leftImg {
                    width: 70px;
                    height: 100%;
                    img {
                        height: 94px;
                    }
                }
            }
        }
        .Nav {
            height: 50px;
            display: flex;
            align-items: center;
            // .item {
            //     font-size: 14px;
            // }
            ::v-deep {
                .van-tab {
                    margin: 10px 26px 0 0;
                }
            }

            // .van-tab__text {
            // }
        }
    }
}
</style>
